<template>
    <view class="l-class container-count">
        <view
            :class="'symbol ' + (result <= min || disabled ? 'disabled l-disabled-class' : 'abled l-symbol-class')"
            @tap.stop.prevent="parseEventDynamicCode($event, result <= min || disabled ? 'doNothing' : 'reduceTap')"
            data-type="overflow_min"
            :hover-class="isHover ? 'count-hover' : ''"
        >
            <view class="l-icon l-icon-reduce" :style="'font-size:' + iconSize + ';color:' + iconColor"></view>
        </view>
        <input v-if="focus" class="l-count-class count" :disabled="disabled" type="number" :focus="focus" :value="result" @blur="onBlur" />
        <view v-else class="l-count-class count" mut-bind:tap="onCount">{{ result }}</view>
        <view
            :class="'l-symbol-class symbol ' + (result >= max || disabled ? 'disabled l-disabled-class' : 'abled l-symbol-class')"
            @tap.stop.prevent="parseEventDynamicCode($event, result >= max || disabled ? 'doNothing' : 'addTap')"
            data-type="overflow_max"
            :hover-class="isHover ? 'count-hover' : ''"
        >
            <view class="l-icon l-icon-add" :style="'font-size:' + iconSize + ';color:' + iconColor"></view>
        </view>
    </view>
</template>

<script>
import lIcon from '../icon/index';
import hover from '../behaviors/hover';
import eventUtil from '../core/utils/event-util';
export default {
    data() {
        return {
            focus: false,
            result: 1,
            isHover: false
        };
    },

    mixins: [hover],
    externalClasses: ['l-class', 'l-symbol-class', 'l-count-class', 'l-disabled-class'],

    props: {
        count: {
            type: Number,
            default: 1
        },
        max: {
            type: Number,
            default: 9999
        },
        min: {
            type: Number,
            default: 1
        },
        step: {
            type: Number,
            default: 1
        },
        disabled: Boolean,
        iconSize: String,
        iconColor: String
    },

    watch: {
        result: function (t) {
            eventUtil.emit(this, 'linchange', {
                count: t
            });
        },
        count_min_max: {
            deep: true,
            immediate: true,

            handler: function (newValue, oldValue) {
                this.valueRange(this.count, 'parameter');
            }
        }
    },

    methods: {
        doNothing(t) {
            const { type: e } = t.currentTarget.dataset;
            eventUtil.emit(this, 'linout', {
                type: e,
                way: 'icon'
            });
        },
        onCount() {
            this.setData({
                focus: true
            });
        },
        onBlur(t) {
            this.setData({
                focus: false
            });
            let { value: e } = t.detail;
            setTimeout(() => {
                this.blurCount(Number(e), () => {
                    this.count = this.result;
                    eventUtil.emit(this, 'lintap', {
                        count: this.result,
                        type: 'blur'
                    });
                });
            }, 50);
        },
        blurCount(t, e) {
            if (t) {
                this.valueRange(t);
            } else {
                this.setData({
                    result: this.count
                });
            }
            if (e) {
                e();
            }
        },
        valueRange(t, e = 'input') {
            if (t > this.max) {
                this.setData(
                    {
                        result: this.max
                    },
                    () => {
                        eventUtil.emit(this, 'linout', {
                            type: 'overflow_max',
                            way: e
                        });
                    }
                );
            } else {
                if (t < this.min) {
                    this.setData(
                        {
                            result: this.min
                        },
                        () => {
                            eventUtil.emit(this, 'linout', {
                                type: 'overflow_min',
                                way: e
                            });
                        }
                    );
                } else {
                    this.setData({
                        result: t
                    });
                }
            }
        },
        reduceTap() {
            if (this.count - this.step <= this.min) {
                this.count = this.min;
            } else {
                this.count -= this.step;
            }
            this.setData({
                result: this.count
            });
            this.$emit(
                'lintap',
                {
                    detail: {
                        count: this.result,
                        type: 'reduce'
                    }
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
        },
        addTap() {
            if (this.count + this.step >= this.max) {
                this.count = this.max;
            } else {
                this.count += this.step;
            }
            this.setData({
                result: this.count
            });
            this.$emit(
                'lintap',
                {
                    detail: {
                        count: this.result,
                        type: 'add'
                    }
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
        }
    },

    created: function () {}
};
</script>
<style>
.container-count {
    display: flex;
    flex-direction: row;
    width: 170rpx;
    height: 56rpx;
}
.symbol {
    height: 100%;
    width: 56rpx;
    font-size: 28rpx;
    color: #596c8e;
    display: flex;
    align-items: center;
    justify-content: center;
}
.disabled {
    background-color: #f3f3f3;
    color: #c4c9d2;
}
.abled {
    background-color: #ecf1f8;
    color: #596c8e;
}
.count {
    height: 100%;
    flex: 1;
    min-height: 56rpx;
    line-height: 56rpx;
    font-size: 24rpx;
    color: #596c8e;
    background: #f6f7f9;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@font-face {
    font-family: iconfont;
    src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALEAAsAAAAABqwAAAJ3AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBFIEWATYCJAMMCwgABCAFhG0HNxvdBcgekiSBqhRCJKIogADMEYRr5GySu0dQoBAloETFRVKmqpWoK1wVG1th2Ij732n7N5fsqTh2xyneKfa2N3/anZKGvYXFohGGrUFIEA6JogD/fZ7L6U2gA7nGtyynNW3s8fyoF2AcUEBjbYqsRALxFtlF3ImLOE6g3ZheoYOxmRVIKtC4QLww9QYkCxFFMfKtQt2wtIjXKq3pZfrEq+j78d9qJEmqDE09fTTahoFf6deHfNxwgxOiBHl1hYx5oBC3GjMXIsLgItpN0e7yWhHSXPEmkcq31Dv94yWihmo7wbQcS/yiMoJf9yskkEFdzE0Diwo7eF2IkexeNr35cvtSjmQ/fjt5zeTy++93z1I4x8LHT3u9VVdH6SHr0r8+OjOTtCopyONe0uFsIlZDiaMZyTdAmzFfZzrm0+EOQPOcP/IeANGP4rNA8KN0+V8rbPwlMwX83P7UK0Wa5wJwS+sZvMEfUwMbiq9F1lxcFVWFvmwE4ErICtOvARTo9zPeMgROEVoL2hG+FqMeslbjZGHnUemwjlqrbbSbM766wwAuIkobZl1ICL0ekXT7jqzXF1nYb1SG/aLWGxG0O4uBLTtMhpne59gQ2CbNHWK2mEeJXaTj+iXUN5wGz2sjfg15YMaJJqvl/Dh6yOeYEWzqFSEooZy5ZEw6DR2HEZ8zC1tCNoTwq4pCm94kt5gLafs41CCgNqJpB2FqYTyUtxbSlc8vQboNjgbeIejJr0FcwOyc0MhUADlu8kCCe3klsElXIQgUQXGMixiTBiGHgyH85kEW1CLIjBEpX5WCm1GoSV7f4n7fNmiH9syRIkeR77bbiWdmwzMaDAAA')
        format('woff2');
}
.l-icon-add:before {
    content: '\e602';
}
.l-icon-reduce:before {
    content: '\e69c';
}
.l-icon {
    font-family: iconfont;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.l-icon::before {
    display: inline-flex;
}
.count-hover {
    opacity: 0.8;
}
</style>
